<template>
  <div>
    <div class="search">
      <a-form-model
        layout="inline"
        :model="pageQuery.queryParam"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
      >
        <div>
          <!-- <a-button type="primary"
                    @click="add">
            <a-icon type="plus" />
            添加
          </a-button> -->
          <a-button title="" type="primary" @click="exportExcel">
            <a-icon type="export" />
            execl导出
          </a-button>
        </div>
        <div>
          <a-form-model-item label="昵称" labelAlign="right" prop="nickName">
            <a-input v-model="pageQuery.queryParam.nickName" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="query">查询 </a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
    </div>
    <a-table
      rowKey="id"
      :columns="columns"
      :pagination="pageQuery"
      :data-source="data"
      @change="onChange"
    >
      <span slot="img" slot-scope="item">
        <img :src="item" class="avator"
      /></span>
      <span slot="boolean" slot-scope="item">{{ item ? '是' : '否' }}</span>
      <span slot="time" slot-scope="time"> {{ time | formatTimer }}</span>
      <span slot="operation" slot-scope="item">
        <a-button @click="detail(menu)" type="">详情</a-button>
        <a-button @click="edit(item.id)" type="primary">修改</a-button>
        <a-popconfirm
          title="确定删除？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="del(item.id)"
        >
          <a-button type="danger">删除</a-button>
        </a-popconfirm>
      </span>
    </a-table>
    <a-modal
      :title="modal.title"
      :visible="modal.visible"
      :confirm-loading="modal.confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="entity"
        :model="form"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="头像地址" labelAlign="right" prop="avatarUrl">
          <a-input v-model="form.avatarUrl" />
        </a-form-model-item>
        <a-form-model-item label="城市" labelAlign="right" prop="city">
          <a-input v-model="form.city" />
        </a-form-model-item>
        <a-form-model-item label="国家" labelAlign="right" prop="country">
          <a-input v-model="form.country" />
        </a-form-model-item>
        <a-form-model-item
          label="性别 1 男 0 女"
          labelAlign="right"
          prop="gender"
        >
          <a-input v-model="form.gender" />
        </a-form-model-item>
        <a-form-model-item
          label="默认 zh_CN 中国"
          labelAlign="right"
          prop="language"
        >
          <a-input v-model="form.language" />
        </a-form-model-item>
        <a-form-model-item label="昵称" labelAlign="right" prop="nickName">
          <a-input v-model="form.nickName" />
        </a-form-model-item>
        <a-form-model-item label="微信openId" labelAlign="right" prop="openId">
          <a-input v-model="form.openId" />
        </a-form-model-item>
        <a-form-model-item label="省份" labelAlign="right" prop="province">
          <a-input v-model="form.province" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '微信openId',
    dataIndex: 'openId',
    key: 'openId',
    scopedSlots: {}
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    key: 'nickName',
    scopedSlots: {}
  },
  {
    title: '头像地址',
    dataIndex: 'avatarUrl',
    key: 'avatarUrl',
    scopedSlots: {
      customRender: 'img'
    }
  },
  {
    title: '国家',
    dataIndex: 'country',
    key: 'country',
    scopedSlots: {}
  },
  {
    title: '省份',
    dataIndex: 'province',
    key: 'province',
    scopedSlots: {}
  },
  {
    title: '城市',
    dataIndex: 'city',
    key: 'city',
    scopedSlots: {}
  },
  {
    title: '性别 1 男 0 女',
    dataIndex: 'gender',
    key: 'gender',
    scopedSlots: {}
  },
  {
    title: '语言',
    dataIndex: 'language',
    key: 'language',
    scopedSlots: {}
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    scopedSlots: {
      customRender: 'time'
    }
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    scopedSlots: {
      customRender: 'time'
    }
  }
  // {
  //   title: '操作',
  //   key: 'operation',
  //   scopedSlots: { customRender: 'operation' }
  // },
]
import {
  wxUserPage,
  wxUserGet,
  wxUserUpdate,
  wxUserSave,
  wxUserDelete
} from '@a/wxUser'
import { formatTimer } from '@u/utils'

export default {
  data() {
    return {
      pageQuery: {
        showSizeChanger: true,
        hideOnSinglePage: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        total: 0,
        current: 1,
        defaultCurrent: 1,
        pageSize: 10,
        queryParam: {
          nickName: null
        }
      },
      modal: {
        title: '',
        visible: false,
        confirmLoading: false
      },
      data: [],
      rules: {},
      columns,
      form: {
        avatarUrl: null,
        city: null,
        country: null,
        createTime: null,
        deleted: false,
        gender: null,
        id: null,
        language: null,
        nickName: null,
        openId: null,
        province: null,
        updateTime: null,
        version: null
      }
    }
  },
  created() {
    this.query()
  },
  methods: {
    onChange(pageQuery) {
      this.pageQuery = pageQuery
      this.query()
    },
    query() {
      wxUserPage(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.data = res.data.records
          this.pageQuery.total = res.data.total
        }
      })
    },
    add() {
      this.modal.visible = true
      this.modal.title = '新增'
    },
    exportExcel() {
      console.log('导出Excel')
    },
    detail(item) {
      this.form = item
      this.modal.visible = true
      this.modal.title = '详情'
    },
    edit(id) {
      wxUserGet(id).then(res => {
        if (res.code === 200) {
          this.form = res.data
          this.modal.visible = true
          this.modal.title = '编辑'
          console.log(this.modal)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    del(id) {
      wxUserDelete(id).then(res => {
        if (res.code === 200) {
          this.$message.info('删除成功')
          this.query()
        } else {
          this.$message.error(res.msg)
        }
      })
      console.log('删除' + id)
    },
    handleOk() {
      this.$refs.entity.validate(valid => {
        if (valid) {
          if (this.modal.title === '编辑') {
            wxUserUpdate(this.form).then(res => {
              if (res.code === 200) {
                this.$message.info('更新成功')
                this.handleCancel()
                this.query()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            wxUserSave(this.form).then(res => {
              if (res.code === 200) {
                this.$message.info('更新成功')
                this.handleCancel()
                this.query()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
          console.log('modal ok')
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.modal.visible = false
      this.resetForm()
    },
    resetForm() {
      this.form = {
        avatarUrl: null,
        city: null,
        country: null,
        createTime: null,
        deleted: false,
        gender: null,
        id: null,
        language: null,
        nickName: null,
        openId: null,
        province: null,
        updateTime: null,
        version: null
      }
    }
  },
  filters: {
    formatTimer
  }
}
</script>
<style>
.search .ant-form {
  padding: 10px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.avator {
  width: 50px;
  height: 50px;
}
</style>
